<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../org/angular.min.js"></script>
</head>

<body ng-app="app" ng-controller="ctrl">
    <p>{{name}}</p>
    <!-- 出于安全的考虑，html标签是不让在页面显示的，所以一下代码不但不会显示，还会报错，但是配合sce服务后，可以正常解析显示标签 -->
    <p ng-bind-html="name"></p>

    <p ng-bind-html="title"></p>

    <div ng-bind-html="data|trustHtml"></div>
    <script>
        var m = angular.module('app', []);
        m.controller('ctrl', ['$scope', '$sce', function($scope, $sce) {
            $scope.name = '<h1>带标签的会自动转实体，不会被当做标签解析</h1>';

            // 使用sce服务让标签能够正常解析
            $scope.title = $sce.trustAsHtml('<h1>带标签的会自动转实体，不会被当做标签解析</h1>');
            //通过自定义的过滤器去处理
            $scope.data = '<h1 style="color:red">通过过滤器处理的数据</h1>';

        }])
        //定义过滤器方便的处理解析标签
        m.filter('trustHtml', ['$sce', function($sce) {
            return function(data) {
                return $sce.trustAsHtml(data);
            }
        }])
    </script>
</body>

</html>
